<template>
  <div class="AccountSetting">
    <Row>
      <Col span="24" style="margin-top: 50px">
      <Divider>
        <h1>账户设置</h1>
      </Divider>
      </Col>

      <!-- 选项卡 -->
      <Col span='9' offset='7'>
      <Tabs style="margin-top: 50px;margin-left: 39px" v-model="value" :animated="false">
        <TabPane label="信息修改" name="信息修改" icon="ios-contact"></TabPane>
        <TabPane label="密码修改" name="密码修改" icon="ios-key"></TabPane>
        <TabPane label="邮箱修改" name="邮箱修改" icon="ios-mail"></TabPane>
      </Tabs>
      </Col>

      <template v-if="value==='信息修改'">
        <Col span="24" class="inputset">
        <Input key="user" v-model="userdata.username" :placeholder='userdata.username' size="large" style="width: 210px; margin-top:10px">
        <span slot="prepend">用户名</span>
        </Input>
        </Col>
        <Col span="24" class="inputset">
        <Input key="company" v-model="userdata.company" :placeholder='userdata.company' size="large" style="width: 210px; margin-top:10px">
        <span style="padding-right: 13px;margin:auto" slot="prepend">公司</span>
        </Input>
        </Col>
        <Col span="24" class="inputset">
        <Button type="success" style="width: 210px; margin-top:10px" long @click="btnActionUpdateInfo">保存</Button>
        </Col>
      </template>

      <template v-if="value==='密码修改'">
        <Col span="24" class="inputset">
        <Input key="oldpwd" v-model="password.old" placeholder='输入旧密码' size="large" style="width: 210px; margin-top:10px" type="password"
        />
        </Col>
        <Col span="24" class="inputset">
        <Input key="newpwd" v-model="password.news" placeholder='输入新密码' size="large" style="width: 210px; margin-top:10px"
          type="password" />
        </Col>
        <Col span="24" class="inputset">
        <Input key="cotify" v-model="password.cotify" placeholder='确认密码' size="large" style="width: 210px; margin-top:10px" type="password"
        />
        </Col>
        <Col span="24" class="inputset">
        <Button type="success" style="width: 210px; margin-top:10px" long @click="btnActionpwd">保存</Button>
        </Col>
      </template>


      <template v-if="value==='邮箱修改'">
        <Col span="24" class="inputset">
        <Input key="oldemail" v-model="email.old" :placeholder='userdata.email' size="large" style="width: 210px; margin-top:10px"
          type="email" />
        </Col>
        <Col span="24" class="inputset">
        <Input key="newemail" v-model="email.news" placeholder='输入新邮箱' size="large" style="width: 210px; margin-top:10px" type="email"
        />
        </Col>
        <Col span="24" class="inputset">
        <Input key="password" v-model="email.password" placeholder='输入密码确认身份' size="large" style="width: 210px; margin-top:10px"
          type="password" />
        </Col>
        <Col span="24" class="inputset">
        <Button type="success" style="width: 210px; margin-top:10px" long @click="btnActionmail">保存</Button>
        </Col>
      </template>

    </Row>
  </div>
</template>


<script>
  export default {
    data() {
      return {
        //选型卡当前项
        value: "信息修改",

        //用户信息
        userdata: {
          username: "",
          // age: "",
          // qq: "",
          company: "",
          // email: ""
        },

        //用户密码
        password: {

          old: "",
          news: "",
          cotify: ""
        },

        //用户密码
        email: {
          old: "",
          news: "",
          password: ""
        },

        //请求地址
        url: {
          userInfo: this.$Global.url.userInfo,
          changemail: this.$Global.url.changemail,
          changepwd: this.$Global.url.changepwd,
          login: this.$Global.url.login
        }
      };
    },

    methods: {
      /**********************************************************按钮行为*********************************/

      /**
       * 更新用户数据
       */
      btnActionUpdateInfo() {
        // console.log(this.userdata);
        if (this.userdata.username === '') {
          this.$Message.warning('用户名不能为空');
          return;
        }
        this.$http
          .put(this.url.userInfo, this.userdata)
          .then(res => {
            if (res.status == 200) {
              this.$Message.info(res.data.message);
              // localStorage.setItem('userName',this.userdata.username);
              this.$store.commit("userName", this.userdata.username);
            }
          })
          .catch(error => console.log(error));
      },
      /**
       * 改密码
       */
      btnActionpwd() {
        if (
          this.password.old !== "" &&
          this.password.news !== "" &&
          this.password.cotify !== ""
        ) {
          if (this.password.cotify === this.password.news) {
            console.log(typeof this.password.old);
            console.log(typeof this.password.news);
            this.$http
              .put(this.url.changepwd, {
                oldPassword: this.password.old,
                newPassword: this.password.news
              })
              .then(res => {
                if (res.status == 200) {
                  this.$Message.info(res.data.message);
                  console.log();
                  this.$store.commit("logout");
                  this.reLogin();
                }
              })
              .catch(error => console.log(error));
          } else {
            this.$Message.error("两次密码输入不一致");
          }
        } else {
          this.$Message.error("密码不能为空");
        }
      },

      /**
       * 改邮箱
       */
      btnActionmail() {
        var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/
        if (!reg.test(this.email.news)) {
          this.$Message.warning("新邮箱格式错误");
          return;
        }
        this.$http
          .put(this.url.changemail, {
            email: this.email.news,
            password: this.email.password
          })
          .then(res => {
            if (res.status == 200) {
              this.$Message.info(res.data.message);
              var success = res.data.success;

              if (success) this.$router.push({ name: "home" });
            }
          })
          .catch(error => console.log(error));
      },
      /**
       * 重新登录并回到主页
       */
      reLogin() {
        this.$http
          .post(this.url.login, {
            email: this.userdata.email,
            password: this.password.news
          })
          .then(res => {
            if (res.status == 200) {
              var success = res.data.success;
              if (success) {
                this.$Message.success(res.data.message);
                var token = res.data.account.token;
                var name = res.data.account.name;
                this.$store.commit("login", token);
                this.$store.commit("userName", name);
                this.$router.push({ name: "home" });
              } else {
                console.log("error");
                this.$Message.error(res.data.message);
              }
            }
          })
          .catch(error => {
            console.log(error);
          });
      },
      // },

      /**
       * 获取用户数据
       */
      getUserInfo() {
        this.$http
          .get(this.url.userInfo)
          .then(res => {
            if (res.status == 200) {
              this.userdata = res.data.data;
              console.log(this.userdata);
            }
          })
          .catch(error => console.log(error));
      }
    },

    created() {
      /**
       * 开发模式下，拼接地址，形成完整的API接口
       */
      if (process.env.NODE_ENV === "development") {
        this.url.userInfo = this.$Global.url.baseUrl + this.$Global.url.userInfo;
        this.url.changepwd =
          this.$Global.url.baseUrl + this.$Global.url.changepwd;
        this.url.changemail =
          this.$Global.url.baseUrl + this.$Global.url.changemail;
        this.url.login = this.$Global.url.baseUrl + this.$Global.url.login;
      }
      this.getUserInfo();
    }
  };
</script>

<style>
</style>